<template>
	<view>
		<!-- 自定义导航栏 -->
		<!-- <z-nav-bar :title="sUserInfo.nickname"></z-nav-bar> -->
		<view class="bgcolor">
			<cu-custom bgColor="bgmain" :isBack="true">
				<view slot="content">{{ sUserInfo.nickname }}</view>
			</cu-custom>
		</view>
		<view class="content" @touchstart="hideDrawer">
			<scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop"
				:scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="100">
				<!-- 加载历史数据waitingUI -->
				<view class="loading">
					<view class="spinner">
						<!-- <view class="rect1"></view>
						<view class="rect2"></view>
						<view class="rect3"></view>
						<view class="rect4"></view>
						<view class="rect5"></view> -->
					</view>
				</view>
				<view class="row" v-for="(row, index) in msgList" :key="index" :id="'msg' + row.msg.id">
					<!-- 系统消息 -->
					<!-- {{row.msg.id}} -->
					<block v-if="row.type == 'system'">
						<view class="system">
							<!-- 文字消息 -->
							<view v-if="row.msg.type == 'text'" class="text">
								{{ row.msg.content.text }}
							</view>
							<view v-if="row.msg.type == 'submsg'" class="text" @click="subscribe">
								{{ row.msg.content.text }} <text style="color: #7F5AFF;margin-left: 10rpx;">&nbsp; ❤ 订阅
									❤</text>
							</view>
							<!-- 领取红包消息 -->
							<view v-if="row.msg.type == 'redEnvelope'" class="red-envelope">
								<image src="/static/img/red-envelope-chat.png"></image>
								{{ row.msg.content.text }}
							</view>
						</view>
					</block>
					<!-- 用户消息 -->
					<block v-if="row.type == 'user'">
						<!-- 自己发出的消息 -->
						<view class="my" v-if="row.msg.userinfo.u_id == myuid">
							<!-- 左-消息 -->
							<view class="left">
								<!-- 文字消息 -->
								<view v-if="row.msg.type == 'text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<!-- 语言消息 -->
								<view v-if="row.msg.type == 'voice'" class="bubble voice" @tap="playVoice(row.msg)"
									:class="playMsgid == row.msg.id ? 'play' : ''">
									<view class="length">{{ row.msg.content.length }}</view>
									<view class="icon my-voice"></view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.msg.type == 'img'" class="bubble img" @tap="showPic(row.msg)">
									<image :src="row.msg.content.url"
										:style="{ 'width': row.msg.content.w + 'px', 'height': row.msg.content.h + 'px' }">
									</image>
								</view>
								<!-- 红包 -->
								<view v-if="row.msg.type == 'redEnvelope'" class="bubble red-envelope"
									@tap="openRedEnvelope(row.msg, index)">
									<image src="/static/img/red-envelope.png"></image>
									<view class="tis">
										<!-- 点击开红包 -->
									</view>
									<view class="blessing">
										{{ row.msg.content.blessing }}
									</view>
								</view>

							</view>
							<!-- 右-头像 -->
							<view class="right">
								<image :src="row.msg.userinfo.face"></image>
							</view>
						</view>
						<!-- 别人发出的消息 -->
						<view class="other" v-if="row.msg.userinfo.u_id != myuid">
							<!-- 左-头像 -->
							<view class="left">
								<image :src="row.msg.userinfo.face"></image>
							</view>
							<!-- 右-用户名称-时间-消息 -->
							<view class="right">
								<view class="username">
									<view class="name">{{ row.msg.userinfo.username }}</view>
									<view class="time">{{ row.msg.time }}</view>
								</view>
								<!-- 文字消息 -->
								<view v-if="row.msg.type == 'text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<!-- 语音消息 -->
								<view v-if="row.msg.type == 'voice'" class="bubble voice" @tap="playVoice(row.msg)"
									:class="playMsgid == row.msg.id ? 'play' : ''">
									<view class="icon other-voice"></view>
									<view class="length">{{ row.msg.content.length }}</view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.msg.type == 'img'" class="bubble img" @tap="showPic(row.msg)">
									<image :src="row.msg.content.url"
										:style="{ 'width': row.msg.content.w + 'px', 'height': row.msg.content.h + 'px' }">
									</image>
								</view>
								<!-- 红包 -->
								<view v-if="row.msg.type == 'redEnvelope'" class="bubble red-envelope"
									@tap="openRedEnvelope(row.msg, index)">
									<image src="/static/img/red-envelope.png"></image>
									<view class="tis">
										<!-- 点击开红包 -->
									</view>
									<view class="blessing">
										{{ row.msg.content.blessing }}
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<swiper class="emoji-swiper" :class="{ hidden: hideEmoji }" indicator-dots="true" duration="150">
				<swiper-item v-for="(page, pid) in emojiList" :key="pid">
					<view v-for="(em, eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="emojiUrl + '/static/emoji/' + em.url"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{ hidden: hideMore }">
				<view class="list">
					<view class="box" @tap="chooseImage">
						<view class="icon tupian2"></view>
					</view>
					<!-- <view class="box" @tap="camera"><view class="icon paizhao"></view></view> -->
					<!-- <view class="box" @tap="handRedEnvelopes"><view class="icon hongbao"></view></view> -->
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box" :class="popupLayerClass + bottomClass" @touchmove.stop.prevent="discard"
			:style="'bottom:' + bottom + 'px'">
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<!-- <view class="voice">
				<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
			</view> -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice ? '' : 'hidden', recording ? 'recording' : '']" @touchstart="voiceBegin"
					@touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{ voiceTis }}</view>
				<view class="text-mode" :class="isVoice ? 'hidden' : ''">
					<view class="box">
						<!-- @focus="inputFocus" -->
						<!-- <textarea @blur="inputBlur" placeholder="  " cursor-spacing="10"
							v-model="textMsg" @focus="inputFocus" /> -->

						<input @blur="inputBlur" placeholder="  " cursor-spacing="10"
							v-model="textMsg" @focus="inputFocus" :adjust-position="false" />

					</view>
					<view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="send" :class="isVoice ? 'hidden' : ''" @tap="sendText">
				<view class="btn">发送</view>
			</view>
			<!-- <view class="hhh">x</view>
			<view class="hhh">x</view>
			<view class="hhh">x</view>
			<view class="hhh">x</view> -->

		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording ? '' : 'hidden'">
			<view class="ing" :class="willStop ? 'hidden' : ''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop ? '' : 'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop ? 'change' : ''">{{ recordTis }}</view>
		</view>
		<!-- 红包弹窗 -->
		<view class="windows" :class="windowsState">
			<!-- 遮罩层 -->
			<view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
			<view class="layer" @touchmove.stop.prevent="discard">
				<view class="open-redenvelope">
					<view class="top">
						<view class="close-btn">
							<view class="icon close" @tap="closeRedEnvelope"></view>
						</view>
						<image src="/static/img/im/face/face_1.jpg"></image>
					</view>
					<view class="from">来自{{ redenvelopeData.from }}</view>
					<view class="blessing">{{ redenvelopeData.blessing }}</view>
					<view class="money">{{ redenvelopeData.money }}</view>
					<view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
						查看领取详情 <view class="icon to"></view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
import socket from '@/utils/socket';
import emoji from './emoji.js';
import siteInfo from '@/siteinfo.js';
var app = getApp();
export default {
	data() {
		return {
			emojiUrl: siteInfo.url.replace(/api\//g, ""),
			//文字消息
			textMsg: '',
			//消息列表
			isHistoryLoading: false,
			scrollAnimation: false,
			scrollTop: 0,
			scrollToView: '',
			msgList: [],
			msgImgList: [],
			myuid: '',

			//录音相关参数
			// #ifndef H5
			//H5不能录音
			RECORDER: uni.getRecorderManager(),
			// #endif
			isVoice: false,
			voiceTis: '按住 说话',
			recordTis: "手指上滑 取消发送",
			recording: false,
			willStop: false,
			initPoint: { identifier: 0, Y: 0 },
			recordTimer: null,
			recordLength: 0,

			//播放语音相关参数
			AUDIO: uni.createInnerAudioContext(),
			playMsgid: null,
			VoiceTimer: null,
			// 抽屉参数
			popupLayerClass: '',
			// more参数
			hideMore: true,
			//表情定义
			hideEmoji: true,
			emojiList: emoji,
			//红包相关参数
			windowsState: '',
			redenvelopeData: {
				rid: null,	//红包ID
				from: null,
				face: null,
				blessing: null,
				money: null
			},
			s_id: '', // 发送对象id
			userInfo: {}, // 用户信息
			sUserInfo: {}, // 聊天对象信息
			page: 1, // 分页
			bottom: 0,
			bottomClass: " "
		};
	},
	onLoad(option) {
		var that = this

		app.globalData.util.request({
			url: 'WechatUser/users',
			data: {},
			success(res) {
				that.myuid = res.data.data.u_id,
					uni.setStorageSync('dmhu_id', res.data.data.u_id)
				that.userInfo = res.data.data
			}
		}, true)
		app.globalData.util.request({
			url: 'WechatUser/userss',
			data: {
				u_id: option.s_id
				// ...option
			},
			success(res) {
				that.sUserInfo = res.data.data
			}
		}, true)
		console.log(option, 'lllllll')
		this.s_id = option.s_id
		this.getMsgList();
		if (!socket.socketStart) {
			socket.init();
		}
		//语音自然播放结束
		this.AUDIO.onEnded((res) => {
			this.playMsgid = null;
		});
		// #ifndef H5
		//录音开始事件
		this.RECORDER.onStart((e) => {
			this.recordBegin(e);
		})
		//录音结束事件
		this.RECORDER.onStop((e) => {
			this.recordEnd(e);
		})
		// #endif
		let t = this;
		socket.acceptMessage = function (res) {
			console.log('----------', res);
			if (res.type == 'msg') {
				uni.showTabBarRedDot({ index: 2 })
			}
			if (res.type == 'msg' && res.data.msg.userinfo.u_id == t.s_id) {
				console.log('发消息了');
				t.screenMsg(res.data)
			}

		}
	},
	onShow() {
		this.scrollTop = 9999999;
		// 检测登录
		// this.judgeLogin(()=>{
		// this.userInfo = uni.getStorageSync('userInfo');
		// this.myuid = uni.getStorageSync('userInfo').uid
		// });

		//模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
		//
		// uni.getStorage({
		// 	key: 'redEnvelopeData',
		// 	success:  (res)=>{
		// 		console.log(res.data);
		// 		let nowDate = new Date();
		// 		let lastid = this.msgList[this.msgList.length-1].msg.id;
		// 		lastid++;
		// 		let row = {type:"user",msg:{id:lastid,type:"redEnvelope",time:nowDate.getHours()+":"+nowDate.getMinutes(),userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{blessing:res.data.blessing,rid:Math.floor(Math.random()*1000+1),isReceived:false}}};
		// 		this.screenMsg(row);
		// 		uni.removeStorage({key: 'redEnvelopeData'});
		// 	}
		// });
	},
	methods: {
		inputFocus(e) {
			console.log(e);
			this.setData({
				bottom: e.detail.height
			});
			this.bottomClass = ""
		},

		inputBlur() {
			this.bottom = 0
			this.bottomClass = ""


		},
		// 接受消息(筛选处理)
		screenMsg(msg) {
			//从长连接处转发给这个方法，进行筛选处理
			if (msg.type == 'system') {
				// 系统消息
				switch (msg.msg.type) {
					case 'text':
						this.addSystemTextMsg(msg);
						break;
					case 'redEnvelope':
						this.addSystemRedEnvelopeMsg(msg);
						break;
				}
			} else if (msg.type == 'user') {
				// 用户消息
				switch (msg.msg.type) {
					case 'text':
						this.addTextMsg(msg);
						break;
					case 'voice':
						this.addVoiceMsg(msg);
						break;
					case 'img':
						this.addImgMsg(msg);
						break;
					case 'redEnvelope':
						this.addRedEnvelopeMsg(msg);
						break;
				}

				//非自己的消息震动
				if (msg.msg.userinfo.u_id != this.myuid) {
					console.log('振动');
					uni.vibrateLong();
				}
			}
			this.$nextTick(function () {
				// 滚动到底
				this.scrollToView = 'msg' + msg.msg.id
			});
		},
		// 订阅消息
		subscribe() {
			var that = this
			// that.$http.get('api/SysSite/index').then(res=>{
			// 	if(res){
			// 		uni.requestSubscribeMessage({
			// 		  tmplIds: [res.list[0].gift_template_id,res.list[0].chat_template_id],
			// 		  success (res) {
			// 			  console.log(res)
			// 		  }
			// 		})
			// 	}
			// })
			app.globalData.util.request({
				url: 'SysSite/index',
				data: {},
				success(res) {
					uni.requestSubscribeMessage({
						tmplIds: [res.list[0].gift_template_id, res.list[0].chat_template_id],
						success(res) {
							console.log(res)
						}
					})
				}
			})

		},

		//触发滑动到顶部(加载历史信息记录)
		loadHistory(e) {
			if (this.isHistoryLoading) {
				return;
			}
			this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
			this.scrollAnimation = false;//关闭滑动动画
			let Viewid = this.msgList[0].msg.id;//记住第一个信息ID
			//本地模拟请求历史记录效果
			setTimeout(() => {
				var that = this
				that.page++
				// that.$http.get('api/ZhChat/getChatRecord',{'s_id': that.s_id,'page':that.page}).then(res=> {
				// 	that.sUserInfo = res.sdata
				// 	if(res.data.data.length <= 0){
				// 		return false
				// 	}
				// 	let list = res.data.data
				// 	// 消息列表

				// 	// 获取消息中的图片,并处理显示尺寸
				// 	for(let i=0;i<list.length;i++){
				// 		if(list[i].type=='user'&&list[i].msg.type=="img"){
				// 			list[i].msg.content = this.setPicSize(list[i].msg.content);
				// 			this.msgImgList.unshift(list[i].msg.content.url);
				// 		}
				// 		list[i].msg.id = Math.floor(Math.random()*1000+1);
				// 		this.msgList.unshift(list[i]);
				// 	}

				// 	//这段代码很重要，不然每次加载历史数据都会跳到顶部
				// 	this.$nextTick(function() {
				// 		this.scrollToView = 'msg'+Viewid;//跳转上次的第一行信息位置
				// 		this.$nextTick(function() {
				// 			this.scrollAnimation = true;//恢复滚动动画
				// 		});

				// 	});
				// 	this.isHistoryLoading = false;
				// })
				app.globalData.util.request({
					url: 'ZhChat/getChatRecord',
					data: {
						s_id: that.s_id,
						page: that.page
					},
					success: (res) => {
						console.log(res);
						that.sUserInfo = res.data.data.sdata
						if (res.data.data.data.data.length <= 0) {
							return false
						}
						let list = res.data.data.data.data
						// 消息列表

						// 获取消息中的图片,并处理显示尺寸
						for (let i = 0; i < list.length; i++) {
							if (list[i].type == 'user' && list[i].msg.type == "img") {
								list[i].msg.content = this.setPicSize(list[i].msg.content);
								this.msgImgList.unshift(list[i].msg.content.url);
							}
							// list[i].msg.id = Math.floor(Math.random()*1000+1);
							this.msgList.unshift(list[list.length - i - 1]);

						}
						// this.msgList=[
						// 	...list, ...this.msgList
						// ]

						//这段代码很重要，不然每次加载历史数据都会跳到顶部
						this.$nextTick(function () {
							this.scrollToView = 'msg' + Viewid;//跳转上次的第一行信息位置
							this.$nextTick(function () {
								this.scrollAnimation = true;//恢复滚动动画
							});

						});


						this.isHistoryLoading = false;
					}
				}, true)

			}, 1000)
		},
		// 加载初始页面消息
		getMsgList() {
			var that = this

			// that.$http.get('api/ZhChat/getChatRecord',{'s_id': that.s_id,'page':that.page}).then(res=> {
			// 	that.sUserInfo = res.sdata
			// 	let list = []
			// 	if(that.page == 1){
			// 		list = [{type:"system",msg:{id:0,type:"submsg",content:{text:"点击订阅新消息提醒"}}}]
			// 	}
			// 	// list = res.data.data
			// 	list = [...res.data.data,...list]
			// 	// 获取消息中的图片,并处理显示尺寸
			// 	for(let i=0;i<list.length;i++){
			// 		if(list[i].type=='user'&&list[i].msg.type=="img"){
			// 			list[i].msg.content = this.setPicSize(list[i].msg.content);
			// 			this.msgImgList.push(list[i].msg.content.url);
			// 		}
			// 	}
			// 	that.msgList = list;
			// 	// 滚动到底部
			// 	this.$nextTick(function() {
			// 		//进入页面滚动到底部
			// 		this.scrollTop = 9999;
			// 		this.$nextTick(function() {
			// 			this.scrollAnimation = true;
			// 		});

			// 	});
			// })
			app.globalData.util.request({
				url: 'ZhChat/getChatRecord',
				data: {
					s_id: that.s_id,
					page: that.page
				},
				success(res) {
					that.sUserInfo = res.sdata
					let list = []
					if (that.page == 1) {
						list = [{ type: "system", msg: { id: 0, type: "submsg", content: { text: "点击订阅新消息提醒" } } }]
					}
					list = res.data.data.data.data
					console.log("打印数组", res.data.data.data.data)
					// list = [...res.data.data,...list]
					// 获取消息中的图片,并处理显示尺寸
					for (let i = 0; i < list.length; i++) {
						if (list[i].type == 'user' && list[i].msg.type == "img") {
							list[i].msg.content = that.setPicSize(list[i].msg.content);
							that.msgImgList.push(list[i].msg.content.url);
						}
					}
					that.msgList = list;
					// 滚动到底部
					that.$nextTick(function () {
						//进入页面滚动到底部
						that.scrollTop = 9999;
						that.$nextTick(function () {
							that.scrollAnimation = true;
						});

					});
				}
			}, true)
		},
		//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
		setPicSize(content) {
			// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
			let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
			let maxH = uni.upx2px(350);//350是定义消息图片最大高度
			if (content.w > maxW || content.h > maxH) {
				let scale = content.w / content.h;
				content.w = scale > 1 ? maxW : maxH * scale;
				content.h = scale > 1 ? maxW / scale : maxH;
			}
			return content;
		},

		//更多功能(点击+弹出) 
		showMore() {
			this.isVoice = false;
			this.hideEmoji = true;
			if (this.hideMore) {
				this.hideMore = false;
				this.openDrawer();
			} else {
				this.hideDrawer();
			}
		},
		// 打开抽屉
		openDrawer() {
			this.popupLayerClass = 'showLayer';
		},
		// 隐藏抽屉
		hideDrawer() {
			this.popupLayerClass = '';
			setTimeout(() => {
				this.hideMore = true;
				this.hideEmoji = true;
			}, 150);
		},
		// 选择图片发送
		chooseImage() {
			this.getImage('album');
		},
		//拍照发送
		camera() {
			this.getImage('camera');
		},
		//发红包
		handRedEnvelopes() {
			uni.navigateTo({
				url: 'HM-hand/HM-hand'
			});
			this.hideDrawer();
		},
		//选照片 or 拍照
		getImage(type) {
			this.hideDrawer();
			var that = this
			// uni.chooseImage({
			// 	sourceType:[type],
			// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 	success: (res)=>{
			// 		for(let i=0;i<res.tempFilePaths.length;i++){
			// 			uni.getImageInfo({
			// 				src: res.tempFilePaths[i],
			// 				success: (image)=>{
			// 					console.log(image.width);
			// 					console.log(image.height);
			// 					let msg = {url:res.tempFilePaths[i],w:image.width,h:image.height};
			// 					this.sendMsg(msg,'img');
			// 				}
			// 			});
			// 		}
			// 	}
			// });


			// this.$http.urlImgUpload({
			// 	 count: 1,
			// 	 sizeType: ['compressed']
			// 	}).then(e=>{
			// 		console.log(e)
			// 		uni.getImageInfo({
			// 			src: e[0],
			// 			success: (image)=>{
			// 				console.log(image.width);
			// 				console.log(image.height);
			// 				let msg = {url:e[0],w:image.width,h:image.height};
			// 				this.sendMsg(msg,'img');
			// 			}
			// 		});
			// 	})
			uni.chooseImage({
				counts: 1,
				sizeType: ['compressed'],
				// 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'],
				// 可以指定来源是相册还是相机，默认二者都有
				success: function (res) {
					that.uploadimgs({
						path: res.tempFilePaths //这里是选取的图片的地址数组

					});
				}
			});
		},
		uploadimgs: function (data) {
			uni.showLoading({
				title: '上传中...',
				mask: true
			});
			console.log("上传中");
			var that = this; // console.log("打印",data.path.length)
			// var count = that.data.addedCount + data.path.length;

			var counts = that.addedCountss;

			for (var i = 0; i < data.path.length; i++) {
				// console.log("走这里")

				uni.uploadFile({
					// url: app.globalData.util.url() + 'c=entry&a=wxapp&do=ImgPost&m=gc_school',
					// filePath: data.path[i],
					// name: 'file',
					// formData: null,
					url: siteInfo.url + 'Base/upload',
					filePath: data.path[i],
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					name: 'file',
					formData: {
						'wxapp_id': siteInfo.uniacid
					},
					success: resp => {

						uni.hideLoading();

						var pic = JSON.parse(resp.data);
						let msg = { url: pic.data, w: 100, h: 100 };
						console.log('111', pic)
						console.log(pic.status, '---11---')
						if (pic.status == 200) {
							counts++; // console.log(pic)
							console.log('222')
							that.sendMsg(msg, 'img');

							// 					var picList = that.picListss;
							// 					picList.push(pic.data); // console.log(data.path[i])

							// 					var images = that.imagesss.concat(pic.data);
							// 					console.log('333')
							// 					that.setData({
							// 						imagesss: images,
							// 						addedCountss: counts,
							// 						picListss: picList
							// 					});
							// 					console.log(that.addedCount);
							// 					console.log('444')
							// 					if (counts == that.picListss.length) {
							// 						console.log('555')
							uni.hideLoading({});
							// }
						} else {
							uni.showToast({
								title: pic.msg,
								icon: 'none'
							});
						}
					}
				});
			}
		},
		// 选择表情
		chooseEmoji() {
			this.hideMore = true;
			if (this.hideEmoji) {
				this.hideEmoji = false;
				this.openDrawer();
			} else {
				this.hideDrawer();
			}
		},
		//添加表情
		addEmoji(em) {
			this.textMsg += em.alt;
		},

		//获取焦点，如果不是选表情ing,则关闭抽屉
		textareaFocus(e) {
			this.bottom = 0
			this.bottomClass = " bottom"
			// this.bottom = e.detail.height
			if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
				this.hideDrawer();
			}
		},
		// 发送文字消息
		sendText() {
			this.hideDrawer();//隐藏抽屉
			if (!this.textMsg) {
				return;
			}
			let content = this.replaceEmoji(this.textMsg);
			let msg = { text: content }
			this.sendMsg(msg, 'text');
			this.textMsg = '';//清空输入框
		},
		//替换表情符号为图片
		replaceEmoji(str) {
			let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
				console.log("item: " + item);
				for (let i = 0; i < this.emojiList.length; i++) {
					let row = this.emojiList[i];
					for (let j = 0; j < row.length; j++) {
						let EM = row[j];
						if (EM.alt == item) {
							//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
							//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
							let onlinePath = this.emojiUrl + '/static/emoji/'

							// let imgstr = '<img src="'+onlinePath+this.onlineEmoji[EM.url]+'">';
							let imgstr = '<img src="' + onlinePath + EM.url + '">';
							console.log("imgstr: " + imgstr);
							return imgstr;
						}
					}
				}
			});
			return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';
		},

		// 发送消息
		sendMsg(content, type) {
			var that = this;
			//实际应用中，此处应该提交长连接，模板仅做本地处理。
			var nowDate = new Date();
			var lastid = that.msgList.length > 0 ? that.msgList[that.msgList.length - 1]['msg']['id'] : 0;
			console.log(that.sUserInfo, '对方的用户信息');
			var userInfo = {
				u_id: that.userInfo.u_id,
				face: that.userInfo.avatar,
				username: that.userInfo.nickname
			}


			lastid++;
			var msg = {
				type: 'user',
				msg: {
					id: lastid,
					wxapp_id: siteInfo.uniacid,
					suserinfo: that.s_id,
					time: nowDate.getHours() + ":" + nowDate.getMinutes(),
					type: type,
					userinfo: userInfo,
					content: content,
				},
			}
			console.log(msg, '------------------')
			that.screenMsg(msg);
			// 发送消息
			socket.send({ type: 'msg', data: msg });

			// 定时器模拟对方回复,三秒
			// setTimeout(()=>{
			// 	lastid = this.msgList[this.msgList.length-1].msg.id;
			// 	lastid++;
			// 	msg = {type:'user',msg:{id:lastid,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:content}}
			// 	// 本地模拟发送消息
			// 	this.screenMsg(msg);
			// },3000)
		},

		// 添加文字消息到列表
		addTextMsg(msg) {
			this.msgList.push(msg);
		},
		// 添加语音消息到列表
		addVoiceMsg(msg) {
			this.msgList.push(msg);
		},
		// 添加图片消息到列表
		addImgMsg(msg) {

			msg.msg.content = this.setPicSize(msg.msg.content);
			this.msgImgList.push(msg.msg.content.url);
			this.msgList.push(msg);
		},
		addRedEnvelopeMsg(msg) {
			this.msgList.push(msg);
		},
		// 添加系统文字消息到列表
		addSystemTextMsg(msg) {
			this.msgList.push(msg);
		},
		// 添加系统红包消息到列表
		addSystemRedEnvelopeMsg(msg) {
			this.msgList.push(msg);
		},
		// 打开红包
		openRedEnvelope(msg, index) {
			let rid = msg.content.rid;
			uni.showLoading({
				title: '加载中...'
			});
			console.log("index: " + index);
			//模拟请求服务器效果
			setTimeout(() => {
				//加载数据
				if (rid == 0) {
					this.redenvelopeData = {
						rid: 0,	//红包ID
						from: "大黑哥",
						face: "/static/img/im/face/face.jpg",
						blessing: "恭喜发财，大吉大利",
						money: "已领完"
					}
				} else {
					this.redenvelopeData = {
						rid: 1,	//红包ID
						from: "售后客服008",
						face: "/static/img/im/face/face_2.jpg",
						blessing: "恭喜发财",
						money: "0.01"
					}
					if (!msg.content.isReceived) {
						// {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
						this.sendSystemMsg({ text: "你领取了" + (msg.userinfo.u_id == this.myuid ? "自己" : msg.userinfo.username) + "的红包" }, 'redEnvelope');
						console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));
						this.msgList[index].msg.content.isReceived = true;
					}
				}
				uni.hideLoading();
				this.windowsState = 'show';

			}, 200)

		},
		// 关闭红包弹窗
		closeRedEnvelope() {
			this.windowsState = 'hide';
			setTimeout(() => {
				this.windowsState = '';
			}, 200)
		},
		sendSystemMsg(content, type) {
			let lastid = this.msgList[this.msgList.length - 1].msg.id;
			lastid++;
			let row = { type: "system", msg: { id: lastid, type: type, content: content } };
			this.screenMsg(row)
		},
		//领取详情
		toDetails(rid) {
			uni.navigateTo({
				url: 'HM-details/HM-details?rid=' + rid
			})
		},
		// 预览图片
		showPic(msg) {
			uni.previewImage({
				indicator: "none",
				current: msg.content.url,
				urls: this.msgImgList
			});
		},
		// 播放语音
		playVoice(msg) {
			console.log(msg, '******1')
			this.playMsgid = msg.id;
			this.AUDIO.src = msg.content.url;
			this.$nextTick(function () {
				this.AUDIO.play();
			});
		},
		// 录音开始
		voiceBegin(e) {
			if (e.touches.length > 1) {
				return;
			}
			this.initPoint.Y = e.touches[0].clientY;
			this.initPoint.identifier = e.touches[0].identifier;
			this.RECORDER.start({ format: "mp3" });//录音开始,
		},
		//录音开始UI效果
		recordBegin(e) {
			this.recording = true;
			this.voiceTis = '松开 结束';
			this.recordLength = 0;
			this.recordTimer = setInterval(() => {
				this.recordLength++;
			}, 1000)
		},
		// 录音被打断
		voiceCancel() {
			this.recording = false;
			this.voiceTis = '按住 说话';
			this.recordTis = '手指上滑 取消发送'
			this.willStop = true;//不发送录音
			this.RECORDER.stop();//录音结束
		},
		// 录音中(判断是否触发上滑取消发送)
		voiceIng(e) {
			if (!this.recording) {
				return;
			}
			let touche = e.touches[0];
			//上滑一个导航栏的高度触发上滑取消发送
			if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
				this.willStop = true;
				this.recordTis = '松开手指 取消发送'
			} else {
				this.willStop = false;
				this.recordTis = '手指上滑 取消发送'
			}
		},
		// 结束录音
		voiceEnd(e) {
			if (!this.recording) {
				return;
			}
			this.recording = false;
			this.voiceTis = '按住 说话';
			this.recordTis = '手指上滑 取消发送'
			this.RECORDER.stop();//录音结束
		},
		//录音结束(回调文件)
		recordEnd(e) {
			clearInterval(this.recordTimer);
			console.log(e, '录音')
			e['path'] = e.tempFilePath
			e['size'] = e.fileSize
			let options = {
				count: 1,
				files: [e]
			}
			if (!this.willStop) {
				this.$http.urlFileUpload(options).then(res => {
					let msg = {
						length: 0,
						url: res[0]
					}
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					msg.length = min + ':' + sec;
					this.sendMsg(msg, 'voice');
				})

				// console.log("e: " + JSON.stringify(e));
				// let msg = {
				// 	length:0,
				// 	url:e.tempFilePath
				// }
				// let min = parseInt(this.recordLength/60);
				// let sec = this.recordLength%60;
				// min = min<10?'0'+min:min;
				// sec = sec<10?'0'+sec:sec;
				// msg.length = min+':'+sec;
				// this.sendMsg(msg,'voice');
			} else {
				console.log('取消发送录音');
			}
			this.willStop = false;
		},
		// 切换语音/文字输入
		switchVoice() {
			this.hideDrawer();
			this.isVoice = this.isVoice ? false : true;
		},
		discard() {
			return;
		}
	}
}
</script>
<style lang="scss">
@import "@/static/HM-chat/css/style.scss";

.input-box {
	position: fixed !important;
	padding-bottom: 0px !important;
}

.username {
	display: flex;
	align-items: center;
}

.bottom {
	// margin-bottom:$bottom !important;
	// bottom:$bottom !important;
	// padding-bottom:$bottom !important;
	// .hhh{
	// 	height: $bottom !important;
	// 	flex-shrink: 0;
	// }
}
</style>